<template>
  <div class="page-container">
    <el-card class="m-20">
      <div slot="header">{{$route.name}}</div>
      <el-form :model="tenant" :rules="rules" status-icon ref="tenantForm" label-width="100px">
        <el-form-item label="名称" prop="name" :error="errors.name">
          <el-input v-model="tenant.name"></el-input>
        </el-form-item>
        <el-form-item label="省市" prop="selectedDistrict" :error="errors.provinceId || errors.cityId">
          <el-cascader :options="districts" :props="{value: 'id', label: 'name'}" :clearable="true"
            v-model="tenant.selectedDistrict"></el-cascader>
        </el-form-item>
        <el-form-item label="地址" prop="address" :error="errors.address">
          <el-input v-model="tenant.address"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contact" :error="errors.contact">
          <el-input v-model="tenant.contact"></el-input>
        </el-form-item>
        <el-form-item label="联系人手机" prop="phone" :error="errors.phone">
          <el-input v-model="tenant.phone"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="description" :error="errors.description">
          <el-input v-model="tenant.description" type="textarea" :rows="2"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit()">提交</el-button>
          <el-button @click="resetForm()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import * as Tenant from '@/api/tenant'
import * as District from '@/api/district'

export default {
  data() {
    return {
      districts: [],
      errors: {},
      tenant: {},
      rules: {
        selectedDistrict: [
          { required: true, message: '必填' }
        ],
        name: [
          { required: true, message: '必填' },
          { min: 3, max: 255, message: '最少3个字符，最多250个字符' }
        ],
        provinceId: [
          { required: true, message: '必填' },
          { type: 'number', message: '请填写数字' }
        ],
        cityId: [
          { required: true, message: '必填' },
          { type: 'number', message: '请填写数字' }
        ],
        address: [
          { required: true, message: '必填' },
          { max: 255, message: '最多250个字符' }
        ],
        contact: [
          { required: true, message: '必填' },
          { pattern: /[\u4E00-\u9FA5]{2,20}/, message: '最少2个汉字，最多50个汉字' }
        ],
        phone: [
          { required: true, message: '必填', trigger: 'blur' },
          { pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号码，如：18012345678' }
        ]
      }
    }
  },
  created() {
    District.getProvincesAndCities().then(data => {
      this.districts = data
    })
  },
  methods: {
    submit() {
      this.$refs['tenantForm'].validate((valid) => {
        if (valid) {
          const json = { ...this.tenant }
          json.provinceId = json.selectedDistrict[0]
          json.cityId = json.selectedDistrict[1]
          json.selectedDistrict = undefined

          Tenant.create(json).then(res => {
            this.$message.success('提交成功')
          }).catch(err => {
            if (err.error === 'RESOLVE_PARAM_ERROR') {
              this.errors = err.data
            }
            this.$message.error(err.message || err)
          })
        } else {
          this.$message.error('请正确填写表单')
          return false
        }
      })
    },
    resetForm() {
      this.$refs['tenantForm'].resetFields()
    }
  }
}
</script>
<style>

</style>